<template>
  <cs-container :is-back-to-top="true">
    <div class="drafts">
      <p>草稿箱 (共 {{this.total}} 封)</p>
      <el-button
        size="small"
        type="primary"
        plain
        @click="removeDrafts"
        :disabled="this.ids.length === 0">删除草稿</el-button>
      <el-row>
        <el-col>
          <!-- 表格区域 -->
          <cs-table :table-data="currentTableData"
                    :table-label="tableLabel"
                    @handleButton="handleButton"
                    @handleSortChange="handleSortChange"
                    @handleSelectionChange="handleSelectionChange"
                    :table-option="tableOption">
            <template slot="user" slot-scope="scope">
              <!-- 自定义渲染插槽 -->
              <span style="cursor: pointer; text-decoration: underline;" @click="toMuBan(scope.row.id)">{{ scope.row.user }}</span>
            </template>
          </cs-table>
          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </cs-container>
</template>

<script>
import {
  getDraftsData,
  deleteData
} from '@/api/email/setting'
import CsTable from '@/components/cs-table'
export default {
  data() {
    return {
      currentTableData: [],
      tableLabel: [
        { label: '收件人', param: 'user', align: 'left', sortable: false, slot: true, isShow: true, width: '180' },
        { label: '主题', param: 'title', align: 'left', isShow: true },
        { label: '时间', param: 'createTime', align: 'left', sortable: false, isShow: true, width: '180' }
      ],
      tableOption: {
        label: '操作',
        width: '150',
        options: [
          { label: '编辑', type: 'primary', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:group:update' }
          // { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0,
      ids: []
    }
  },
  components: {
    CsTable
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getDraftsData({ pageNo: this.pageNo, pageSize: this.pageSize }).then((res) => {
        if (res.code === 200) {
          this.currentTableData = res.data.rows
          this.total = res.data.totalRows
        }
      })
    },
    // 点击查看详情
    toMuBan(id) {
      this.$router.push({
        path: '/system/Email/email',
        query: {
          id: id
        }
      })
      // getDraftsDataByid(id).then((res) => {
      //   if (res.code === 200) {
      //     const data = res.data
      //     this.$router.push({
      //       path: '/system/Email/email',
      //       query: data
      //     })
      //   }
      // })
    },
    handleButton(val) {
      this.toMuBan(val.row.id)
    },
    handleSortChange() {
    },
    // 多选操作
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    // 监听分页区域
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getData()
    },
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.pageNo = newPage
      this.getData()
    },
    // 删除
    removeDrafts() {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then((res) => {
        deleteData(this.ids).then((res) => {
          this.getData()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
  .drafts {
    padding: 0 20px 20px 20px;
  }
  .el-row, .el-pagination {
    margin-top: 10px;
  }
</style>
